<template>
  <div class="page pay-index">
    <van-nav-bar title="扫一扫支付" left-text="返回" left-arrow @click-left="$router.go(-1)" />

    <div class="box flex jc-c bg-fff">
      <img :src="queryObj.ewm" alt />
    </div>
    <p class="bg-fff tac pt-15 pb-15 money">￥{{(queryObj.allFee*1).toFixed(2)}}</p>

    <van-cell-group class="pb-20">
        <van-cell title="收款方" value="天堂电子有限公司"></van-cell>
        <van-cell title="剩余支付时间">
            <van-count-down :time="time" />
        </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
        // 从确认订单页面传过来的参数
      queryObj: this.$route.query,
      // 定时器
      timer: null
    };
  },

  created() {
      this.getOrderDetail();
  },
  beforeDestroy() {
      console.log('销毁定时器');
      clearInterval(this.timer);
  },

  computed: {
      // 剩余支付时间
      time() {
          return 15*60*1000 - (Date.now() - this.queryObj.createTime);
      }
  },

  methods: {
      /**
       * 轮询订单详情接口, 查看订单状态
       */
      getOrderDetail() {
        this.timer = setInterval(async ()=> {
            let res = await this.$axios.post('/order/detail',{orderId: this.queryObj.orderId});
            console.log('订单状态', res.result.orderStatus);
            let {orderStatus} = res.result;
            if (orderStatus === '01') {
                console.log('跳转到订单列表页面');
                // clearInterval(this.timer);
            }
        },2000)
      }
  }
};
</script>

<style lang="less">
 .pay-index {
     .money {
         font-size: 30px;
     }
 }

</style>